<template>
  <div class="footer">
    <div class="containe">
      <!-- <div class="footer-right" style="margin-right: 40px">
        <img src="@/assets/logo-big.png" />
      </div>
       -->
      <div class="footer-left">
        <div class="concats">
          <span v-for="(it, i) in navigations" :key="i" :title="it.title" @click="go(it)">{{ it.title }}</span>
        </div>
        <div class="copyright">{{ copyright }}</div>
        <div @click="goto" class="copyright2">{{ copyright2 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const copyright = ref("COPYRIGHT © 2017 – 2021 南京菓菓橙科技有限公司版权所有");

const copyright2 = ref("苏ICP备20200613 苏公网备3230920190211号");


const navigations = ref(null);
axios.get("/api/download/common/navigations").then((res) => {
  navigations.value = res.data.data.navigations;
});
const goto = ()=>{
  window.open('https://beian.miit.gov.cn/')
}
const go = (it)=>{
  window.open(`#map_${it.id}.html`)
}
</script>

<style scoped lang="less">
.footer {
  width: 100vw;
  height: 80px !important;
  background: #545759;
  padding: 1rem 1.5rem 5rem;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 20px;
  text-align: center;

  .containe {
    width: 1200px;
    display: inline-block;
    text-align-last: left;
  }

  &-right {
    img {
      cursor: pointer;
      width: 243px;
      height: 66px;
    }
  }

  &-left {
    .concats {
      margin: 5px 0;

      span {
        cursor: pointer;
      }
      span:hover {
        color: @link-color;
      }
      span::after {
        content: "|";
        margin: 0 15px;
      }
      span:last-child::after {
        content: "";
      }
    }

    .copyright,
    .copyright2 {
      font-size: 12px;
      font-weight: 400;
      color: rgba(245, 247, 248, 0.7);
      line-height: 12px;
      margin: 10px 0;
    }
    .copyright2:hover {
      cursor: pointer;
      color: @link-color;
    }
  }
}
</style>
